<template>
  <div class="search" v-loading="loading">
    <div class="href">
      <div class="link">首页</div>
      <icon name="iconxiangyoubeifen16" size="16" />
      <div class="tag" title="关键字" v-if="filter.search">
        {{ filter.search }}
        <span v-if="filter.appoint_id" @click="clearQuery('search', '')">
          &times;
        </span>
      </div>
      <div class="tag" title="商品分类" v-if="filter.appoint_id">
        {{ appoint_name }}
        <span v-if="filter.search" @click="clearQuery('appoint_id', null)">
          &times;
        </span>
      </div>
      <div class="tag" title="商品品牌" v-if="filter.brand_id">
        {{ getBrand(filter.brand_id).name
        }}<span @click="clearQuery('brand_id', null)">&times;</span>
      </div>
      <!-- <div class="tag">全部<span>&times;</span></div> -->
      <!-- <div class="tag">全部<span>&times;</span></div> -->
    </div>
    <div class="filter">
      <div class="brand">
        <div class="tips">品牌:</div>
        <div class="list" v-if="result">
          <div
            class="item"
            :class="{ active: !filter.brand_id }"
            @click="selectBeand(-1)"
          >
            全部
          </div>
          <div
            class="item"
            :class="{ active: filter.brand_id == item.id }"
            v-for="(item, index) in brandList.slice(0, 20)"
            @click="selectBeand(index)"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="more" @click="branddrawer = true">
          更多 <icon name="iconxiangyou" />
        </div>
        <el-drawer title="品牌筛选" :visible.sync="branddrawer" direction="rtl">
          <div class="brand-drawer">
            <div
              class="item"
              :class="{ active: filter.brand_id == item.id }"
              v-for="(item, index) in brandList"
              :key="index"
              @click="selectBeand(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </el-drawer>
      </div>
      <div class="price">
        <div class="tips">价格:</div>
        <div class="list" v-if="result">
          <!-- <div class="item active">0~100</div> -->
          <div
            class="item"
            @click="selectRange(index)"
            :class="{ active: range == index }"
            v-for="(item, index) in priceRange"
            :key="index"
          >
            {{ item.range_name }}
          </div>
        </div>
        <div class="num">
          <input
            type="number"
            v-model.number="filter.minimum"
            placeholder="最低价"
          />
          <span>~</span>
          <input
            type="number"
            v-model.number="filter.highest"
            placeholder="最高价"
          />
          <button @click="setPrice">确定</button>
        </div>
      </div>
      <div class="option">
        <div class="sort">
          <!-- <div
            class="item"
            @click="selectStatus(0)"
            :class="{ active: filter.status == 0 }"
          >
            综合 ↑
          </div> -->
          <!-- <div
            class="item"
            @click="selectStatus(1)"
            :class="{ active: filter.status == 1 }"
          >
            销量 ↑
          </div> -->
          <div
            class="item"
            :class="{ active: parseInt(filter.is_new) }"
            @click="selectisNew"
          >
            新品
          </div>
          <div
            class="item"
            @click="selectStatus(2)"
            :class="{ active: filter.status == 2 || filter.status == 3 }"
          >
            价格 <span :class="{ AES: filter.status == 2 }">↑</span>
          </div>
        </div>
        <div class="radio">
          <div class="item">
            <el-checkbox
              v-model="filter.autarky"
              :true-label="1"
              :false-label="0"
              size="medium"
              >自营</el-checkbox
            >
          </div>
          <div class="item">
            <el-checkbox
              v-model="filter.in_stock"
              :true-label="1"
              :false-label="0"
              size="medium"
              >仅显示有货</el-checkbox
            >
          </div>
        </div>
        <div class="flex"></div>
        <div class="pages">
          {{ filter.current }}/{{ filter.pages
          }}<button @click="provPage" :disabled="filter.current <= 1">
            上一页</button
          ><button @click="nextPage" :disabled="filter.current >= filter.pages">
            下一页
          </button>
        </div>
        <div class="views">
          <div
            class="item"
            :class="{ active: viewModel == 'grid' }"
            @click="viewModel = 'grid'"
          >
            <icon name="ifour-squares-full" size="16" />大图
          </div>
          <div
            class="item"
            :class="{ active: viewModel == 'list' }"
            @click="viewModel = 'list'"
          >
            <icon name="iliebiaolist29" size="16" />小图
          </div>
        </div>
      </div>
    </div>

    <div v-if="result && result.data">
      <div class="no-goods" v-if="result.data.length === 0">
        <el-alert
          :closable="false"
          :title="'没有找到与“' + filter.search + '”相关的商品'"
          type="warning"
        >
        </el-alert>
      </div>
      <div class="grid-goods-list goods-list" v-if="viewModel == 'grid'">
        <GoodsItem1
          :goods="item"
          v-for="(item, index) in result.data"
          :key="index"
        />
      </div>
      <div class="list-goods-list goods-list" v-else>
        <GoodsItem5
          :goods="item"
          v-for="(item, index) in result.data"
          :key="index"
        />
      </div>
    </div>

    <center>
      <Pages1
        v-model="filter.current"
        :size="filter.length"
        :count="filter.total"
        @change="pageChange"
      />
    </center>

    <YouLike1 />
  </div>
</template>

<script>
import api from "@/api";
import Pages1 from "@/components/Pages/Pages1.vue";
import GoodsItem1 from "@/components/GoodsItem/GoodsItem1.vue";
import GoodsItem5 from "@/components/GoodsItem/GoodsItem5.vue";
import YouLike1 from "@/components/YouLike/YouLike1";
export default {
  name: "Search",
  components: { Pages1, GoodsItem1, GoodsItem5, YouLike1 },
  data() {
    return {
      appoint_name: "",
      branddrawer: false,
      loading: false,
      brandList: [],
      range: null,
      priceRange: [
        { range_name: "0-100", minimum: 0, highest: 100 },
        { range_name: "100-300", minimum: 100, highest: 300 },
        { range_name: "300-500", minimum: 300, highest: 500 },
        { range_name: "500-1000", minimum: 500, highest: 1000 },
        { range_name: "1000+", minimum: 1000, highest: null },
      ],
      filter: {
        status: 0, // 0为综合，1为销量，2为价格倒叙, 3为价格升序
        appoint_id: null,
        service: [], // 折扣和服务  数组
        in_stock: 0, // 筛选：仅看有货 有选择传1
        is_new: 0, // 筛选：新品 有选择传1
        promotion: 0, // 筛选：促销 有选择传1
        autarky: 0, // 筛选：自营 有选择传1
        goodbrand: [], // 品牌ID 数组
        minimum: null, // 筛选：最低价格
        highest: null, // 筛选：最高价格
        type: 0,
        search: "",
        current: 1,
        length: 10,
        total: 0,
        pages: 0,
      },
      result: null,
      viewModel: "grid",
    };
  },
  computed: {},
  watch: {
    "$route.query": function () {
      this.getGoodsList();
    },
    "filter.autarky": function () {
      this.toFilter("autarky");
    },
    "filter.in_stock": function () {
      this.toFilter("in_stock");
    },
  },
  created() {
    this.getGoodsList();
    // api.GOODS_BRAND({ appoint_id: this.filter.appoint_id }).then((res) => {
  },
  methods: {
    getBrand(id) {
      let brand = {};
      this.brandList.some((item) => {
        if (item.id == id) {
          brand = item;
          return true;
        }
      });
      return brand;
    },
    clearQuery(name, val) {
      this.filter[name] = val;
      if (name == "appoint_id") {
        this.filter.brand_id = null;
      }
      this.toFilter(name);
    },
    toFilter(name) {
      if (name !== "current") {
        this.filter.current = 1;
        this.$router.replace({
          path: "/goods/search",
          query: Object.assign({}, this.$route.query, {
            [name]: this.filter[name],
            current: 1,
          }),
        });
      } else {
        this.$router.replace({
          path: "/goods/search",
          query: Object.assign({}, this.$route.query, {
            [name]: this.filter[name],
          }),
        });
      }
    },
    setPrice() {
      this.filter.range = "";
      this.toFilter("range");
      this.getGoodsList();
    },
    async getGoodsList() {
      this.loading = true;
      this.range = parseInt(this.$route.query.range);
      // 格式化查询参数类型
      let query = this.$route.query;
      query.is_new = parseInt(query.is_new) || 0;
      query.autarky = parseInt(query.autarky) || 0;
      query.in_stock = parseInt(query.in_stock) || 0;
      query.status = parseInt(query.status) || 0;
      query.current = parseInt(query.current) || 1;
      query.appoint_id = parseInt(query.appoint_id) || null;
      this.appoint_name = query.appoint_name;

      let brandList = [];
      if (query.appoint_id) {
        console.log(111);
        brandList = await api.GOODS_BRAND({ appoint_id: query.appoint_id });
      } else if (query.search) {
        console.log(222);
        brandList = await api.GOODS_BRAND({ search: query.search });
      }
      this.brandList = brandList;

      Object.assign(
        this.filter,
        this.$route.query,
        this.priceRange[this.range] || {}
      );
      let result = await api.GOODS_LIST(this.filter);
      this.result = result;
      this.$set(this.filter, "total", result.total);
      this.$set(this.filter, "pages", result.pages);
      this.loading = false;
    },
    provPage() {
      if (this.filter.current > 1) {
        this.filter.current -= 1;
        this.toFilter("current");
      }
    },
    nextPage() {
      if (this.filter.current < this.filter.pages) {
        this.filter.current += 1;
        this.toFilter("current");
      }
    },
    pageChange(page) {
      this.$set(this.filter, "current", page);
      this.toFilter("current");
    },
    selectisNew() {
      this.filter.is_new = parseInt(this.filter.is_new) ? 0 : 1;
      this.toFilter("is_new");
    },
    selectRange(index) {
      if (this.filter.range == index) {
        this.filter.range = "";
        this.filter.minimum = null;
        this.filter.highest = null;
      } else {
        this.filter.range = index;
      }

      this.toFilter("range");
    },
    selectStatus(type) {
      if (type === 0) this.filter.status = 0;
      else if (type === 1) this.filter.status = 1;
      else {
        if (this.filter.status == 2) this.filter.status = 3;
        else if (this.filter.status == 3) this.filter.status = 2;
        else this.filter.status = 2;
      }
      this.toFilter("status");
    },
    selectBeand(index) {
      this.branddrawer = false;
      this.filter.brand_id = this.brandList[index]
        ? this.brandList[index].id
        : "";
      this.toFilter("brand_id");
      this.getGoodsList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  .href {
    max-width: 1200px;
    margin: 17px auto;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    display: flex;
    align-items: center;
    i {
      padding: 0 10px;
    }
    .tag {
      cursor: pointer;
      height: 28px;
      background: #ffffff;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-right: 10px;
      span {
        margin-left: 10px;
        color: #fff;
        background: #c6c6c6;
        border-radius: 50px;
        width: 14px;
        height: 14px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .filter {
    max-width: 1200px;
    margin: 17px auto;
    .brand {
      background: #ffffff;
      border: 1px solid #f0f0f0;
      padding: 0 12px;
      display: flex;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      line-height: 48px;
      .more {
        cursor: pointer;
      }
      ::v-deep {
        #el-drawer__title {
          margin-bottom: 0;
          padding-top: 0;
        }
      }
      .brand-drawer {
        padding: 0 20px;
        .item {
          cursor: pointer;
          display: inline-block;
          margin-right: 10px;
          margin-bottom: 10px;
          &.active {
            color: #d52c1a;
          }
        }
      }
      .list {
        flex: 1;
        width: 0;
        display: flex;
        flex-wrap: wrap;
        font-weight: 600;
        .item {
          cursor: pointer;
          margin: 0 15px;
          &.active {
            color: #d52c1a;
          }
        }
      }
    }
    .price {
      height: 46px;
      background: #ffffff;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      line-height: 48px;
      .list {
        display: flex;
        flex-wrap: wrap;
        font-weight: 600;
        .item {
          margin: 0 15px;
          cursor: pointer;
          &.active {
            color: #d52c1a;
          }
        }
      }
      .num {
        margin-left: 15px;
        input {
          width: 64px;
          height: 30px;
          background: #ffffff;
          border-radius: 5px;
          border: 1px solid #d4dbea;
          text-align: center;
        }
        span {
          padding: 0 10px;
          font-size: 16px;
        }
        button {
          width: 60px;
          height: 32px;
          background: #ffffff;
          border-radius: 5px;
          border: 1px solid #d4dbea;
          position: relative;
          top: 1px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
    .option {
      height: 46px;
      background: #ffffff;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      .sort {
        display: flex;
        align-items: center;
        .item {
          cursor: pointer;
          height: 48px;
          padding: 0 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #f0f0f0;
          &.active {
            color: #d52c1a;
          }
          .AES {
            transform: rotate(180deg);
          }
        }
      }
      .radio {
        display: flex;
        align-items: center;
        .item {
          padding: 0 0 0 20px;
          ::v-deep .el-checkbox {
            .el-checkbox__inner {
              width: 18px !important;
              height: 18px !important;
            }
            .el-checkbox__inner::after {
              width: 4px;
              height: 8px;
              border-width: 2px;
            }
            .el-checkbox__label {
              font-size: 16px;
            }
          }
        }
      }
      .pages {
        font-size: 14px;
        color: #1f1f1f;
        button {
          width: 58px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid #d4dbea;
          background: #fff;
          margin-left: 10px;
        }
      }
      .views {
        margin-left: 20px;
        height: 100%;
        border-left: 1px solid #f0f0f0;
        display: flex;
        padding: 0 10px;
        align-items: center;
        .item {
          cursor: pointer;
          height: 100%;
          display: flex;
          padding: 0 10px;
          align-items: center;
          i {
            padding-right: 12px;
          }
          &.active {
            color: #d52c1a;
          }
        }
      }
    }
  }
  .goods-list {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .no-goods {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .grid-goods-list {
    margin-bottom: 10px;
    & > div:nth-child(5n + 1) {
      margin-left: 0;
    }
  }
  .you-like {
    margin: 40px auto;
    width: 1200px;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #dedede;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      height: 44px;
      background: #f3f5f9;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    .box {
      display: flex;
      align-items: center;
      .next,
      .prov {
        width: 31px;
        height: 387px;
        background: #ffffff;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d52c1a;
        cursor: pointer;
        &:hover {
          background: #dfdfdf;
        }
      }
      .prov {
        i {
          transform: rotate(180deg);
        }
      }
      .you-like-list {
        flex: 1;
        width: 0;
        margin: 0 18px;
      }
    }
  }
}
</style>
